<template>
  <v-container class="my-6">
    <v-row class="text-center mb-8">
      <v-col cols="12">
        <h2 class="text-h4 font-weight-bold">{{ $t('products.section.title') }}</h2>
        <p class="text-subtitle-1 mt-2">{{ $t('products.section.subtitle') }}</p>
      </v-col>
    </v-row>
    
    <v-row justify="center">
      <v-col 
        v-for="(product, i) in featuredProducts" 
        :key="i" 
        cols="12" sm="6" md="4"
        class="d-flex"
      >
        <div 
          class="product-card flex-grow-1"
          @click="goToProductDetail(product.id)"
        >
          <v-img
            :src="product.image"
            height="300"
            cover
            class="product-image"
          >
            <div class="product-overlay">
              <div class="product-content">
                <h3 class="product-title">{{ product.name }}</h3>
                <p class="product-description">{{ product.description }}</p>
                <v-btn
                  color="primary"
                  variant="outlined"
                  size="small"
                  class="mt-2 product-button"
                >
                  {{ $t('products.viewDetails') }}
                </v-btn>
              </div>
            </div>
          </v-img>
        </div>
      </v-col>
    </v-row>
    
    <v-row class="mt-6">
      <v-col cols="12" class="text-center">
        <v-btn
          color="primary"
          to="/products"
          size="large"
        >
          {{ $t('products.viewAll') }}
        </v-btn>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import img1 from '@/assets/images/home/1-1920-1920.webp'
import img2 from '@/assets/images/home/2-1920-1920.webp'
import img3 from '@/assets/images/home/3-1920-1920.webp'

const productList = ['Precursors', 'Speciality Gases', 'Electronic Gases']

export default {
  name: 'FeaturedProducts',
  data() {
    return {
      featuredProducts: [
        {
          id: 1,
          name: 'products.1.name',
          description: 'products.1.description',
          image: img1,
        },
        {
          id: 2,
          name: 'products.2.name',
          description: 'products.2.description',
          image: img2,
        },
        {
          id: 3,
          name: 'products.3.name',
          description: 'products.3.description',
          image: img3,
        }
      ]
    }
  },
  methods: {
    goToProductDetail(productId) {
      this.$router.push(`/products?id=${productId}`);
    }
  },
  watch: {
    '$i18n.locale': {
      handler(newLocale) {
        this.featuredProducts = this.featuredProducts.map(product => ({
          ...product,
          name: productList[product.id - 1],
          description: newLocale === 'zh'
            ? ` Focus on the electronic speciality gas business and regularly reach close cooperation with famous semiconductor, display panel, photovoltaic and other industries customers. `
            : ` Focus on the electronic speciality gas business and regularly reach close cooperation with famous semiconductor, display panel, photovoltaic and other industries customers. `
        }));
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.product-card {
  cursor: pointer;
  transition: transform 0.3s ease;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.product-image {
  position: relative;
  border-radius: 12px;
}

.product-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
  display: flex;
  align-items: flex-end;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-card:hover .product-overlay {
  opacity: 1;
}

.product-content {
  color: white;
  text-align: left;
}

.product-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 8px;
}

.product-description {
  font-size: 0.9rem;
  line-height: 1.4;
  margin-bottom: 12px;
}

.product-button {
  background-color: rgba(255, 255, 255, 0.9) !important;
  color: #1976d2 !important;
}
</style>